<template>
  <div class="container">
    <div class="about-page">
      <div class="about-header">
        <div class="about-avatar">
          <img src="../../public/logo.jpg" alt="lcp" />
        </div>
        <div class="about-intro">
          <h1 class="about-name">lcp</h1>
          <p class="about-title">Java开发者</p>
          <div class="about-social">
            <a href="https://gitee.com/lcp20010801" target="_blank" class="social-link">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
              GitHub
            </a>
            <a href="mailto:793686633@qq.com" class="social-link">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
              Email
            </a>
          </div>
        </div>
      </div>

      <div class="about-content">
        <section class="about-section">
          <h2 class="section-title">关于我</h2>
          <div class="section-content">
            <p>大家好，我是一名热爱编程和技术的开发者，目前就读于某大学计算机技术专业，研一在读。</p>
            <p>我主要专注于Java开发，对前端技术也有了解。我喜欢探索新技术，解决复杂问题，并将我的经验分享给社区。</p>
            <p>在业余时间，我喜欢参与开源项目，撰写技术博客，偶尔也会拍些照片记录生活中的美好瞬间。</p>
            <p>本博客记录了我的学习历程、技术探索和生活感悟，希望能与志同道合的朋友一起交流和成长。</p>
            <p style="color: burlywood;"><strong>我可以为你的期末作业或者毕业设计提供帮助，有意者请联系我。QQ/微信：793686633。</strong></p>
          </div>
        </section>

        <section class="about-section">
          <h2 class="section-title">技能栈</h2>
          <div class="skills-grid">
            <div class="skill-category">
              <h3 class="category-title">前端</h3>
              <ul class="skill-list">
                <li>Servlet / Jsp</li>
                <li>Vue / JavaScript</li>
                <li>HTML5 / CSS3 </li>
                <li>Webpack / Vite</li>
                <li>微信小程序开发</li>
              </ul>
            </div>

            <div class="skill-category">
              <h3 class="category-title">后端</h3>
              <ul class="skill-list">
                <li>Java / Spring Boot</li>
                <li>Node.js / Express</li>
                <li>MySQL / MongoDB</li>
                <li>Redis / ElasticSearch</li>
                <li>RESTful API 设计</li>
              </ul>
            </div>

            <div class="skill-category">
              <h3 class="category-title">其他</h3>
              <ul class="skill-list">
                <li>Git / GitHub</li>
                <li>Docker / 容器化部署</li>
                <li>Linux 服务器管理</li>
                <li>持续集成与部署 (CI/CD)</li>
                <li>设计模式与架构</li>
              </ul>
            </div>
          </div>
        </section>

        <section class="about-section">
          <h2 class="section-title">项目经历</h2>
          <div class="projects-list">
            <div class="project-item card">
              <h3 class="project-title">blog</h3>
              <p class="project-description">一个为开发者设计的博客框架，基于SpringBoot3+Vue3构建，支持Markdown、代码高亮、暗黑模式等特性。</p>
              <div class="project-links">
                <a href="https://gitee.com/lcp20010801/new-blog-web" target="_blank" class="project-link">Gitee</a>
              </div>
            </div>

            <div class="project-item card">
              <h3 class="project-title">新闻爬虫</h3>
              <p class="project-description">基于Scrapy框架，对市面上所有的新闻App进行数据抓取。</p>
              <div class="project-links">
                <a href="#" class="project-link">GitHub</a>
              </div>
            </div>

            <div class="project-item card">
              <h3 class="project-title">基于SpringBoot+Vue的医院问诊系统</h3>
              <p class="project-description">基于ruoyi框架进行的二次开发。</p>
              <div class="project-links">
                <a href="#" class="project-link">GitHub</a>
                <a href="#" class="project-link">文档</a>
              </div>
            </div>
          </div>
        </section>

        <section class="about-section">
          <h2 class="section-title">联系我</h2>
          <div class="section-content">
            <p>如果你有任何问题，或者想要合作，欢迎通过以下方式联系我：</p>
            <ul class="contact-list">
              <li>邮箱：<a href="mailto:793686633@qq.com">793686633@qq.com</a></li>
              <li>GitHub：<a href="https://github.com/vlcmmofdog" target="_blank">@lcp</a></li>
              <li>个人主页：<a href="https://www.giaocode.com" target="_blank">www.giaocode.com</a></li>
            </ul>
            <p>我会尽快回复你的消息。期待与你交流！</p>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about-page {
  padding: 2rem 0 4rem;
}

.about-header {
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
}

.about-avatar {
  margin-right: 2rem;
}

.about-avatar img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.about-name {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.about-title {
  font-size: 1.25rem;
  color: #555;
  margin-bottom: 1rem;
}

.about-social {
  display: flex;
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #f0f4f8;
  border-radius: 4px;
  color: var(--color-text);
  transition: all 0.2s;
}

.social-link:hover {
  background-color: var(--color-primary);
  color: white;
  text-decoration: none;
}

.about-section {
  margin-bottom: 3rem;
}

.section-title {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-border);
}

.section-content {
  font-size: 1.1rem;
  line-height: 1.7;
}

.section-content p {
  margin-bottom: 1rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.category-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.skill-list {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.skill-list li {
  margin-bottom: 0.5rem;
}

.projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.project-item {
  padding: 1.5rem;
}

.project-title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.project-description {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.project-links {
  display: flex;
  gap: 1rem;
}

.project-link {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: #f0f4f8;
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--color-primary);
  transition: all 0.2s;
}

.project-link:hover {
  background-color: var(--color-primary);
  color: white;
  text-decoration: none;
}

.contact-list {
  padding-left: 1.25rem;
  margin: 1.5rem 0;
}

.contact-list li {
  margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
  .about-header {
    flex-direction: column;
    text-align: center;
  }

  .about-avatar {
    margin-right: 0;
    margin-bottom: 1.5rem;
  }

  .about-social {
    justify-content: center;
  }

  .skills-grid,
  .projects-list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
</style>
